<template>
    <div>
        <echartsList
            :x_data="x_data"
            ref="myEcharts"
            :seriesList="seriesList"
            :name="name"
        ></echartsList>

        <div class="tableTab tab_box_fiance">
            <span
                class="tableBtn"
                :class="{ on: index == timeIdx }"
                @click="onTime(item, key, index)"
                v-for="(item, key, index) in timeType"
                :key="index"
                >{{ item }}</span
            >
        </div>

        <div class="table w1021 flex">
            <div class="tableTh tableTr flex wrap w220 right">
                <span class="tableTd tableTdTit">现金流量指标</span>
                <span
                    :class="{ active_Row: activeRow == 1 }"
                    @click="handSelect(1, 'orOnf', 'orOnf')"
                    class="tableTd top"
                    >经营现金净流量(百万元)</span
                >
                <span
                    :class="{ active_Row: activeRow == 2 }"
                    @click="handSelect(2, 'orSel', 'roer')"
                    class="tableTd top"
                    >销售现金流/营业收入(%)</span
                >
                <span
                    :class="{ active_Row: activeRow == 3 }"
                    @click="handSelect(3, 'orOc', 'roaNp')"
                    class="tableTd top"
                    >经营现金流/营业收入(%)</span
                >
                <span
                    :class="{ active_Row: activeRow == 4 }"
                    @click="handSelect(4, 'orOcn', 'orOcn')"
                    class="tableTd top"
                    >经营现金流/经营净收益(%)</span
                >
            </div>
            <div class="tableTr tableBody flex">
                <div
                    class="flex wrap w130"
                    v-for="(item, index) in datalist"
                    :key="index"
                >
                    <span class="tableTd tableTdTit">{{
                        item.enddate | dateFrom
                    }}</span>
                    <span
                        :class="{ active_Row: activeRow == 1 }"
                        @click="handSelect(1, 'orOnf', 'orOnf')"
                        class="orange tableTd top"
                        >{{ item.orOnf | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 2 }"
                        @click="handSelect(2, 'orSel', 'roer')"
                        class="orange tableTd top"
                        >{{
                            item.orSel || item.roer | filterVal("numberNo")
                        }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 3 }"
                        @click="handSelect(3, 'orOc', 'roaNp')"
                        class="orange tableTd top"
                        >{{
                            item.orOc || item.roaNp | filterVal("numberNo")
                        }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 4 }"
                        @click="handSelect(4, 'orOcn', 'orOcn')"
                        class="orange tableTd top"
                        >{{ item.orOcn | filterVal("numberNo") }}</span
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echartsList from "./echartsList";

import { numberNo, number, changeNumber } from "../../script/api";

export default {
    components: {
        echartsList,
    },
    props: {
        tabList: {
            type: Array,
            default: [],
        },
    },
    filters: {
        dateFrom(val) {
            return val.substring(0, 10);
        },
        filterVal(ops, num) {
            if (num == "numberNo") {
                return numberNo(ops, num);
            }
            if (num == "number") {
                return number(ops, num, 1000000);
            }
            if (num == "num") {
                return number(ops, num, 10000);
            }
            if (num == "numb") {
                return number(ops, num, 100);
            }
            if (num == "yiyuan") {
                return number(ops, num, 100000000);
            }
            return ops ? ops : "0.00";
        },
    },
    data() {
        return {
            name: "",
            activeRow: 1,
            x_data: [],
            seriesList: [],
            datalist: [],
            timeIdx: 0, //时间区间 report-报告期，year-年报
            timeType: { report: "按报告期", year: "按年度" },
            initData: {
                //配置柱状图数据
                1: {
                    title: "经营现金净流量(百万元)",
                },
                2: {
                    title: "销售现金流/营业收入(%)",
                },
                3: {
                    title: "经营现金流/营业收入(%)",
                },
                4: {
                    title: "经营现金流/经营净收益(%)",
                },
            },
        };
    },

    watch: {
        tabList: {
            handler(val, oldName) {
                this.datalist = val[this.timeIdx].list;
                this.handleXData();
            },
            immediate: true,
            deep: true,
        },
    },
    mounted() {
        this.name = this.initData[this.activeRow]["title"];
    },
    methods: {
        onTime(item, key, index) {
            this.$emit("onTime", key, index);
            this.timeIdx = index;
            this.activeRow = 1;
        },
        handleXData() {
            this.x_data = [];
            this.seriesList = [];
            this.datalist.map((item) => {
                this.x_data.push(item.enddate.substring(0, 10));
                let y_data = 0;
                if (item.orOnf) {
                    // y_data = number(item.orOnf, "number", 1000000);
                    y_data = changeNumber(item.orOnf, 1000000);
                }
                this.seriesList.push(y_data);
            });
        },
        handSelect(selectRow, key, nexKey) {
            this.seriesList = [];
            this.activeRow = selectRow;
            this.name = this.initData[this.activeRow]["title"];
            this.datalist.map((item) => {
                let y_data = 0;
                if (selectRow == 1) {
                    // y_data = number(item[key], "number", 1000000);
                    y_data = changeNumber(item[key], 1000000);
                } else {
                    if (item[key]) {
                        y_data = changeNumber(item[key], 1);
                    } else {
                        y_data = changeNumber(item[nexKey], 1);
                    }
                }

                this.seriesList.push(y_data);
            });
        },
    },
};
</script>